<template>
	<view class="container">
		<n-loading></n-loading>
		<!-- 城市搜索 -->
		<view class="city-search-wrap" v-if="isReach">
			<view class="search">
				<!-- <u-search placeholder="输入城市名或拼音" @change="searchChange" action-text="取消" @custom="searchbtn()"></u-search> -->
				<view class="l-search">
					<text class="iconfont icon-search"></text>
					<!-- 			<input class="input-search" type="text" :value="inputValue" placeholder="输入城市名或拼音" placeholder-style="color:#8E8F97"
					 :focus="searchFocus" @input="searchChange" /> -->
					<u-search placeholder="输入城市名或拼音" :show-action="false" :value="inputValue" @change="searchChange"></u-search>
					<!-- <text class="clear-input iconfont icon-icon-test" v-if="isClearBtn" @click="inputValue = ''"></text> -->
				</view>
				<text class="r-cancel" open-type="navigateBack" delta="1" @click="searchbtn">
					取消
				</text>
			</view>
			<!-- 搜索列表  -->
			<view class="reach-content" v-show="inputValue">
				<block v-show="searchData.length">
					<view class="li borderBottom" v-for="item in searchData" :key="item.cityId" @click="citySearchList(item)">{{ item.city }}</view>
				</block>
				<view class="has-no-data" v-show="hasNoData">没有找到匹配数据~</view>
			</view>
		</view>

		<!-- 城市列表 -->
		<view v-show="!isReach">
			<view class="top-search">
				<div @click="isReach = true" class="item">
					<u-search placeholder="输入城市名或拼音" :show-action="false"></u-search>
				</div>
			</view>
			<scroll-view class="scroll-view" scroll-y scroll-with-animation="true" enable-back-to-top="true" :scroll-into-view="toIndex"
			 @scroll="scrollHandle">
				<view class="block">
					<!-- 当前城市 -->
					<view class="cityaddress" id="area">
						<u-icon name="map" color="#666" size="36"></u-icon>
						<view class="currentCity" @tap="okCurrent">
							<h3>{{curCity}}</h3>
							<text>当前定位</text>
						</view>
						<view class="relocation" @tap="relocation">
							重新定位
						</view>
					</view>

					<!-- 热门城市 -->
					<view class="area list-item" id="hot">
						<view class="title-wrapp">
							<view class="title">
								<text class="l">已开通城市</text>
							</view>
						</view>
						<view class="ul" v-if="hotcites.length">
							<view class="li" hover-class="hover" v-for="item in hotcites" :key="item.cityId" @click="selectCity(item)">{{ item.city }}</view>
						</view>
					</view>
				</view>
				<!-- 城市列表  -->
				<view class="city-list" v-if="cities!=null">
					<view class="list list-item" v-for="(item, key) of cities" :key="key" :id="key">
						<view class="title">{{ key }}</view>
						<view class="item borderBottom" hover-class="hover" v-for="innerItem in item" :key="innerItem.cityId" @click="selectCity(innerItem)">
							{{ innerItem.city }}
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 字母列表 -->
			<view class="alphabet" @touchstart="touchStart" @touchend="touchEnd" @touchmove.stop="touchMove">
				<view v-for="(item, index) in alphabet" :key="index" @touchstart="getLetter" @touchend="setLetter" :id="item">
					<view class="item" :class="{ active: currentLetter == item }">
						{{ item == "area" ? "" : item == "hot" ? "" : item }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import City from "@/static/city.json";
	export default {
		data() {
			return {
				curCity:'',
				isIPX: null,
				regionId: null, //区域ID
				isToggle: true,
				isReach: false,
				inputValue: "",
				searchData: [], //搜索的数据
				isClearBtn: false,

				regionList: City.data.area, //区域列表,模拟数据请自行修改
				cityId: null, //城市ID
				cityName: null, //城市名
				areaName: '东城区', //区域名,模拟数据请自行修改

				hotcites: [], //热门城市，模拟数据请自行修改City.data.hotcity
				cities: null, //城市列表,拟数据请自行修改City.data.cities

				alphabet: City.data.alphabet, //字母列表
				toIndex: "", //跳转的索引的字母
				tipsLetter: "", //滑动显示字母
				timer: null,
				hasNoData: false,
				searchFocus: false,
				letterDetails: [],
				currentLetter: "area" //默认选择hot
			};
		},
		onLoad:function(){
			this.isGetLocation();
			this.getCityJson();
		},
		watch: {
			// 城市搜索输入框
			inputValue(newVal) {
				this.isClearBtn = newVal ? true : false;

				if (this.timer) {
					clearTimeout(this.timer);
				}

				if (!this.inputValue) {
					this.searchData = [];
					return;
				}
				this.timer = setTimeout(() => {
					const result = [];
					for (let i in this.cities) {
						this.cities[i].forEach(item => {
							if (
								item.spell.includes(this.inputValue) ||
								item.city.includes(this.inputValue)
							) {
								result.push(item);
							}
						});
					}
					this.searchData = result;
					if (this.searchData.length === 0) {
						this.hasNoData = true;
					} else {
						this.hasNoData = false;
					}
				}, 500);
			},
			isReach(val) {
				this.searchFocus = val;
			}
		},
		created() {
			//真实数据请求...
		},
		methods: {
			getCityJson(){
				this.apiget('/public/get-city-name-order', {}).then(res => {
					if (res.data.status == 200) {
						this.hotcites = res.data.data.cover
						this.cities = res.data.data.list
					}
				})
			},
			relocation(){
				this.curCity = '';
				this.isGetLocation();
			},
			okCurrent(){
				uni.setStorage({
				    key: 'currentCity',
				    data: this.curCity,
					success: function () {
						console.log('success');
					}
				});
				uni.navigateBack({
				    delta: 1
				});
			},
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'wgs84',
					success (res) {
						let latitude,longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						uni.request({
							method:'GET',
							url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+res.latitude+','+res.longitude+'&key=UNRBZ-AVCK4-QQYUP-DN6OL-2OAJO-3NFUA&get_poi=1',
						    dataType:'json',
						    success: (res) => {
								_this.curCity = res.data.result.ad_info.city;
						    }
						});
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {					
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			searchbtn() {
				this.isReach = false
				this.inputValue = ''
			},
			//列表滚动，和右边字母表对应
			scrollHandle(e) {
				let view = uni.createSelectorQuery().in(this).selectAll(".list-item");
				view.boundingClientRect(d => {
					let top = d[0].top;
					d.forEach(item => {
						item.top = item.top - top;
						item.bottom = item.bottom - top;
						this.letterDetails.push({
							id: item.id,
							top: item.top,
							bottom: item.bottom
						});
					});
				}).exec();

				const scrollTop = e.detail.scrollTop;
				this.letterDetails.some(item => {
					if (scrollTop >= item.top && scrollTop <= item.bottom - 20) {
						this.currentLetter = item.id;
						//当前固定用的是粘性定位，如果不用粘性定位，在这里设置
						return true;
					}
				});
			},


			//搜索
			searchChange(e) {
				// let {
				// 	value
				// } = e.detail;
				// this.inputValue = value;
				this.inputValue = e;
			},

			//搜索结果列表数据
			citySearchList(item) {
				let choiceCity = '';
				if(item.cityName){
					choiceCity = item.cityName;
				}else if(item.city){
					choiceCity = item.city;
				}
				uni.setStorage({
				    key: 'currentCity',
				    data: choiceCity,
					success: function () {
						console.log('success');
					}
				});
				uni.navigateBack({
				    delta: 1
				});
			},


			selectCity(item) {
				let choiceCity = '';
				choiceCity = item.city;
				uni.setStorage({
				    key: 'currentCity',
				    data: choiceCity,
					success: function () {
						console.log('success');
					}
				});
				uni.navigateBack({
				    delta: 1
				});
				//当前项目是需要选择到区域，所以选择城市后回到区县的地方
				this.toIndex = "area";
				setTimeout(() => {
					this.toIndex = "";
				}, 1000)
			},

			//触发开始
			touchStart(e) {
				console.log(e);
			},
			//移动时
			touchMove(e) {
				uni.vibrateShort();
				let y = e.touches[0].clientY;
				let offsettop = e.currentTarget.offsetTop;

				//判断选择区域,只在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 15); //右边每个字母元素的高度
					let letter = this.alphabet[num];
					this.tipsLetter = letter;

					let curentLetter = this.letterTransform(letter);
					uni.showToast({
						title: curentLetter,
						icon: "none",
						duration: 1000
					});
				}
			},
			//触发结束
			touchEnd() {
				this.toIndex = this.tipsLetter;
			},
			//移动开始获取字母，并放大提示
			getLetter(e) {
				uni.vibrateShort();
				let {
					id
				} = e.currentTarget;
				this.tipsLetter = id;

				let curentLetter = this.letterTransform(id);
				uni.showToast({
					title: curentLetter,
					icon: "none",
					duration: 1000
				});
			},
			//移动结束设置字母，赋值到toIndex
			setLetter() {
				this.toIndex = this.tipsLetter;
			},

			//提示字母转换
			letterTransform(letter) {
				let str = "";
				if (letter == "area") {
					str = "";
				} else if (letter == "hot") {
					str = "";
				} else {
					str = letter;
				}

				return str;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F8F8FA;
	}

	.borderBottom {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: #c1c2cd;
			transform: scaleY(0.5);
		}
	}


	.city-search-wrap {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.search {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #222;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
			background: #fff;
			/* #ifdef H5 */
			position: fixed;
			left: 0;
			top: calc(35px + env(safe-area-inset-top));
			z-index: 1;
			background: #fff;

			/* #endif */
			.l-search {
				flex: 1;

				position: relative;
				height: 60rpx;
				line-height: 60rpx;

				.icon-search {
					font-size: 26rpx;
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					color: #8e8f97;
					font-weight: 700;
				}

				.input-search {
					height: 60rpx;
					box-sizing: border-box;
					padding: 0 100rpx 0 100rpx;
					text-align: center;
					background: #f4f5f9;
					border-radius: 50rpx;
					border: 0;
				}

				.clear-input {
					font-size: 30rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
					padding: 10rpx;
					color: #8e8f97;
				}
			}

			.r-cancel {
				margin-left: 28rpx;
				padding-right: 30rpx;
				padding: 0;
				font-size: 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: transparent;
				border: 0;
			}

		}
	}

	.reach-content {
		padding-top: 95rpx;
		background-color: #FFFFFF;

		.li {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 0;
			position: relative;
		}
	}

	.block {
		// padding: 0 30rpx;
		box-sizing: border-box;

	}

	.cityaddress {
		align-items: center;
		display: flex;
		// width: 100%;
		padding: 24rpx 32rpx;
		height: 64px;
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.02);
		margin: 32rpx;

		.currentCity{
			flex: auto;
			margin: 0 22rpx;
			
			h3 {
				font-style: normal;
				font-weight: normal;
				font-size: 28rpx;
				line-height: 44rpx;
				color: rgba(0, 0, 0, 0.84);
			}
			
			text {
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(0, 0, 0, 0.3);
			}
		}

		.relocation {
			font-size: 24rpx;
			color: #40A9FF;
		}
	}

	.borderBottom {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: #c1c2cd;
			transform: scaleY(0.5);
		}
	}

	.top-search {
		height: 80rpx;
		line-height: 60rpx;
		background-color: #fff;
		width: 100%;

		.item {
			width: 90%;
			color: #8e8f97;
			height: 60rpx;
			line-height: 60rpx;
			margin: auto;
		}
	}

	.scroll-view {
		width: 100%;
		height: calc(100vh - 80rpx);
		box-sizing: border-box;
	}

	.area {
		padding-bottom: 40rpx;
		margin-bottom: 16rpx;
		background-color: #FFFFFF;

		.title-wrapp {
			position: sticky;
			top: 0;
			left: 0;
			background: #fff;
			width: 90%;
			margin: auto;
		}

		.title {
			width: 100%;
			box-sizing: border-box;
			font-size: 40rpx;
			font-weight: 500;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 12px;
			line-height: 18px;
			color: #666666;
			margin-bottom: 14rpx;
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
			margin: 6px 0 0 0;

			.r {
				font-size: 24rpx;
				color: #8e8f97;
				display: inline-block;
				align-items: center;

				.iconfont {
					font-size: 24rpx;
				}
			}
		}

		.ul {
			display: flex;
			flex-wrap: wrap;
			width: 90%;
			margin: auto;

			.li {
				width: 30%;
				padding: 0 10rpx;
				box-sizing: border-box;
				height: 70rpx;
				float: left;
				line-height: 70rpx;
				text-align: center;
				font-size: 26rpx;
				color: #222;
				border-radius: 10rpx;
				margin: 20rpx 3% 0 0;
				border: 1px solid #ECEEF0;
				border-radius: 4px;

				&.active {
					font-weight: 500;
					background: #ffde45;
				}

				&.hover {
					background: #ffde45;
				}
			}


		}
	}

	.city-list {
		// width: 677rpx;
		padding-bottom: 50rpx;
		background-color: #FFFFFF;

		.title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #272636;
			background: #f4f5f9;
			margin-bottom: 20rpx;
			padding-left: 30rpx;
			position: sticky;
			top: 0;
			left: 0;
			z-index: 2;
		}

		.item {
			padding: 24rpx 0 24rpx 30rpx;
			color: #333;
			font-size: 32rpx;
			font-weight: 500;

			&::after {
				left: 30rpx;
				width: calc(100% - 30rpx);
				background: #d2d2d2;
			}
		}

		.hover {
			background: #f4f5f9;

			&::after {
				background: #f4f5f9;
			}
		}
	}

	.alphabet {
		position: fixed;
		right: 0;
		bottom: 12%;
		width: calc(750rpx - 680rpx);
		text-align: center;
		font-size: 20rpx;
		font-weight: 700;
		color: #8e8f97;
		z-index: 99;
		// bottom: 50rpx;

		.item {
			height: 34rpx;
			line-height: 34rpx;
		}

		.active {
			color: #222;
		}
	}

	.has-no-data {
		font-size: 24rpx;
		text-align: center;
		color: #8e8f97;
		margin-top: 50rpx;
	}
</style>
